<!DOCTYPE html><html><head>
      <title>Markdown进阶语法</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\Wang Yuanyuan\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.8.11\crossnote\dependencies\katex\katex.min.css">
      
      
      
      
      
      <style>
      code[class*=language-],pre[class*=language-]{color:#333;background:0 0;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.4;-moz-tab-size:8;-o-tab-size:8;tab-size:8;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:.8em;overflow:auto;border-radius:3px;background:#f5f5f5}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal;background:#f5f5f5}.token.blockquote,.token.comment{color:#969896}.token.cdata{color:#183691}.token.doctype,.token.macro.property,.token.punctuation,.token.variable{color:#333}.token.builtin,.token.important,.token.keyword,.token.operator,.token.rule{color:#a71d5d}.token.attr-value,.token.regex,.token.string,.token.url{color:#183691}.token.atrule,.token.boolean,.token.code,.token.command,.token.constant,.token.entity,.token.number,.token.property,.token.symbol{color:#0086b3}.token.prolog,.token.selector,.token.tag{color:#63a35c}.token.attr-name,.token.class,.token.class-name,.token.function,.token.id,.token.namespace,.token.pseudo-class,.token.pseudo-element,.token.url-reference .token.variable{color:#795da3}.token.entity{cursor:help}.token.title,.token.title .token.punctuation{font-weight:700;color:#1d3e81}.token.list{color:#ed6a43}.token.inserted{background-color:#eaffea;color:#55a532}.token.deleted{background-color:#ffecec;color:#bd2c00}.token.bold{font-weight:700}.token.italic{font-style:italic}.language-json .token.property{color:#183691}.language-markup .token.tag .token.punctuation{color:#333}.language-css .token.function,code.language-css{color:#0086b3}.language-yaml .token.atrule{color:#63a35c}code.language-yaml{color:#183691}.language-ruby .token.function{color:#333}.language-markdown .token.url{color:#795da3}.language-makefile .token.symbol{color:#795da3}.language-makefile .token.variable{color:#183691}.language-makefile .token.builtin{color:#0086b3}.language-bash .token.keyword{color:#0086b3}pre[data-line]{position:relative;padding:1em 0 1em 3em}pre[data-line] .line-highlight-wrapper{position:absolute;top:0;left:0;background-color:transparent;display:block;width:100%}pre[data-line] .line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}pre[data-line] .line-highlight:before,pre[data-line] .line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}pre[data-line] .line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}html body{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ol,html body>ul{margin-bottom:16px}html body ol,html body ul{padding-left:2em}html body ol.no-list,html body ul.no-list{padding:0;list-style-type:none}html body ol ol,html body ol ul,html body ul ol,html body ul ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:700;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::after,html body code::before{letter-spacing:-.2em;content:'\00a0'}html body pre>code{padding:0;margin:0;word-break:normal;white-space:pre;background:0 0;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:after,html body pre code:before,html body pre tt:after,html body pre tt:before{content:normal}html body blockquote,html body dl,html body ol,html body p,html body pre,html body ul{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body code,html body pre{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview ul{list-style:disc}.markdown-preview ul ul{list-style:circle}.markdown-preview ul ul ul{list-style:square}.markdown-preview ol{list-style:decimal}.markdown-preview ol ol,.markdown-preview ul ol{list-style-type:lower-roman}.markdown-preview ol ol ol,.markdown-preview ol ul ol,.markdown-preview ul ol ol,.markdown-preview ul ul ol{list-style-type:lower-alpha}.markdown-preview .newpage,.markdown-preview .pagebreak{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center!important}.markdown-preview:not([data-for=preview]) .code-chunk .code-chunk-btn-group{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .status{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .output-div{margin-bottom:16px}.markdown-preview .md-toc{padding:0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link div,.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}.markdown-preview .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0;min-height:100vh}@media screen and (min-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{font-size:14px!important;padding:1em}}@media print{html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc{padding:0 16px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link div,html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% - 300px);padding:2em calc(50% - 457px - 300px / 2);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
      <!-- The content below will be included at the end of the <head> element. --><script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    // your code here
  });
</script></head><body for="html-export">
    
    
      <div class="crossnote markdown-preview  ">
      <div>
<h2 id="markdown扩展语法">Markdown扩展语法 </h2>
<blockquote>
<p>写在前面：</p>
<ul>
<li>实现扩展语法篇中提到的各类功能的方式不止本篇博客这一种，比如设置对齐，除本博客提到的方法外，还可以通过修改css等方式来实现。但通过对比，从逻辑、记忆难度和本人的书写习惯出发，最终选择了一种方式去呈现。</li>
<li>这篇主要讲述的是Markdown的扩展语法，主要针对特殊的应用场景。如果只是作为日常的书写记录，我认为Markdown基础语法就已经够用了。<strong><a href="https://www.cnblogs.com/poem357/p/17796478.html"><font color="#42b983">基础语法我也写过一篇，感兴趣的可以去看看。</font></a></strong></li>
<li>本篇博文（以及所有博客）的 .md/html 文档都在我的<a href="https://gitee.com/Poem357/my-notes/tree/master/%E4%B8%80%E4%BA%9B%E5%B7%A5%E5%85%B7"> GItee 仓库</a>中，我会根据博客实时更新的，有需要的伙伴可以自行下载~！</li>
</ul>
</blockquote>

<div class="md-toc">
<details style="padding:0;;padding-left:0px;" open="">
        <summary class="md-toc-link-wrapper">
          <a href="#markdown扩展语法" class="md-toc-link"><p>Markdown扩展语法</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#在列表中嵌套其他元素" class="md-toc-link">
            <p>在列表中嵌套其他元素</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#合并单元格" class="md-toc-link">
            <p>合并单元格</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#对齐方式" class="md-toc-link">
            <p>对齐方式</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#背景色" class="md-toc-link">
            <p>背景色</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#定义字体-字号和颜色" class="md-toc-link">
            <p>定义字体、字号和颜色</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#修改图片大小和位置" class="md-toc-link">
            <p>修改图片大小和位置</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#引用类型链接" class="md-toc-link">
            <p>引用类型链接</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#脚注" class="md-toc-link">
            <p>脚注</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#文档内跳转" class="md-toc-link">
            <p>文档内跳转</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#定义列表" class="md-toc-link">
            <p>定义列表</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#任务列表" class="md-toc-link">
            <p>任务列表</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#使用emoji表情" class="md-toc-link">
            <p>使用emoji表情</p>

          </a></div>
        </div>
      </details>
    
</div>
<h3 id="在列表中嵌套其他元素">在列表中嵌套其他元素 </h3>
<hr>
<p>要在保留列表连续性的同时在列表中添加另一种元素，需将该元素缩进一个或两个制表符。</p>
<ul>
<li>添加段落、引用、图片和列表嵌套需要缩进1个制表符</li>
<li>添加代码嵌套需要缩进2个制表符</li>
</ul>
<p><strong>段落</strong><br>
示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>- This is the first list item.
- This is the second list item.
    I need to add other paragraph below the second list item.
- This is the third list item.
</code></pre><p>效果：</p>
<ul>
<li>This is the first list item.</li>
<li>This is the second list item.<br>
I need to add other paragraph below the second list item.</li>
<li>This is the third list item.</li>
</ul>
<p><strong>引用块</strong><br>
示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>- This is the first list item.
- This is the second list item.
    &gt; I need to add other paragraph below the second list item.
- This is the third list item.
</code></pre><p>效果：</p>
<ul>
<li>This is the first list item.</li>
<li>This is the second list item.
<blockquote>
<p>I need to add other paragraph below the second list item.</p>
</blockquote>
</li>
<li>This is the third list item.</li>
</ul>
<p><strong>列表</strong><br>
示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>1. This is the first list item.
2. This is the second list item.
    - I need to add other paragraph below the second list item.
3. This is the third list item.
</code></pre><p>效果：</p>
<ol>
<li>This is the first list item.</li>
<li>This is the second list item.
<ul>
<li>I need to add other paragraph below the second list item.</li>
</ul>
</li>
<li>This is the third list item.</li>
</ol>
<p><strong>图片</strong><br>
示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>- This is the first list item.
- This is the second list item.
    &lt;img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg" width="30%" height="30%"&gt;
- This is the third list item.
</code></pre><p>效果：</p>
<ul>
<li>This is the first list item.</li>
<li>This is the second list item.<br>
<img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg" width="30%" height="30%"></li>
<li>This is the third list item.</li>
</ul>
<p><strong>代码块</strong><br>
示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>- This is the first list item.
- This is the second list item.
        ```c
        {I need to add other paragraph below the second list item.}
        ```
- This is the third list item.
</code></pre><p>效果：</p>
<ul>
<li>This is the first list item.</li>
<li>This is the second list item.<br>
<code>c       {I need to add other paragraph below the second list item.}       </code></li>
<li>This is the third list item.</li>
</ul>
<h3 id="合并单元格">合并单元格 </h3>
<hr>
<blockquote>
<p>Markdown本身不提供合并单元格的语法，但支持HTML标记语言，所以我们可以通过HTML实现跨行/跨列的表格效果。</p>
</blockquote>
<p><strong>HTML表格用到的元素符号：</strong></p>
<table>
<thead>
<tr>
<th style="text-align:center">符号</th>
<th style="text-align:center">全称</th>
<th style="text-align:center">功能</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><code>&lt;table&gt;</code></td>
<td style="text-align:center">---</td>
<td style="text-align:center">表格开始</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;/table&gt;</code></td>
<td style="text-align:center">---</td>
<td style="text-align:center">表格结束</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;tr&gt;</code></td>
<td style="text-align:center">table row</td>
<td style="text-align:center">行开始</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;/tr&gt;</code></td>
<td style="text-align:center">table row</td>
<td style="text-align:center">行结束</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;th&gt;</code></td>
<td style="text-align:center">table header</td>
<td style="text-align:center">表头开始</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;/th&gt;</code></td>
<td style="text-align:center">table header</td>
<td style="text-align:center">表头结束</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;td&gt;</code></td>
<td style="text-align:center">table data</td>
<td style="text-align:center">单元格数据（表格元素）开始</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;/td&gt;</code></td>
<td style="text-align:center">table data</td>
<td style="text-align:center">单元格数据（表格元素）结束</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;rowspan="n"&gt;</code></td>
<td style="text-align:center">span：跨度</td>
<td style="text-align:center">合并n行</td>
</tr>
<tr>
<td style="text-align:center"><code>&lt;colspan="n"&gt;</code></td>
<td style="text-align:center">span：跨度</td>
<td style="text-align:center">合并n列</td>
</tr>
</tbody>
</table>
<p><strong>书写要点：</strong></p>
<ol>
<li>在表格中，开始符号和结束符号之间写文本数据；<br>
<code>&lt;td&gt;text here&lt;/td&gt;</code></li>
<li>当文本元素超过两个时，元素之间另起一行；<br>
<code>HTML      &lt;tr&gt;          &lt;td&gt;text here&lt;/td&gt;          &lt;td&gt;text here&lt;/td&gt;          &lt;td&gt;text here&lt;/td&gt;      &lt;/tr&gt;      </code></li>
<li>合并行/列属于单元格的属性，要在<code>&lt;td&gt;&lt;/td&gt;</code>内部书写，n为要合并的单元格数量。<br>
语法：<code>&lt;td rowspan="n"&gt;text here&lt;/td&gt;</code></li>
</ol>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>Header1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>Header2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>Header3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row1, col1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row1, col2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row1, col3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>rowspan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row2, col2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row2, col3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>row3, col2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>效果：</p>
<table>
    <tbody><tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
    </tr>
    <tr>
        <td>row1, col1</td>
        <td>row1, col2</td>
        <td>row1, col3</td>
    </tr>
    <tr>
        <td rowspan="2">rowspan</td>
        <td>row2, col2</td>
        <td>row2, col3</td>
    </tr>
    <tr>
        <td colspan="2">row3, col2</td>
    </tr>
</tbody></table>
<h3 id="对齐方式">对齐方式 </h3>
<hr>
<blockquote>
<p>通过HTML语言设置表格或单元格内容的对齐方式（左对齐、居中、右对齐）</p>
</blockquote>
<p><strong>HTML元素对齐用到的元素符号：</strong></p>
<table>
<thead>
<tr>
<th style="text-align:left">符号</th>
<th style="text-align:left">注释</th>
<th style="text-align:left">功能</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>align=""</code></td>
<td style="text-align:left">align：对齐</td>
<td style="text-align:left">定义元素水平对齐方式</td>
</tr>
<tr>
<td style="text-align:left"><code>valign=""</code></td>
<td style="text-align:left">vertical align</td>
<td style="text-align:left">定义元素垂直对齐方式</td>
</tr>
<tr>
<td style="text-align:left">left</td>
<td style="text-align:left">......</td>
<td style="text-align:left">左对齐</td>
</tr>
<tr>
<td style="text-align:left">center</td>
<td style="text-align:left">......</td>
<td style="text-align:left">居中对齐</td>
</tr>
<tr>
<td style="text-align:left">right</td>
<td style="text-align:left">......</td>
<td style="text-align:left">右对齐</td>
</tr>
<tr>
<td style="text-align:left">top</td>
<td style="text-align:left">......</td>
<td style="text-align:left">顶端对齐</td>
</tr>
<tr>
<td style="text-align:left">middle</td>
<td style="text-align:left">......</td>
<td style="text-align:left">垂直居中</td>
</tr>
<tr>
<td style="text-align:left">bottom</td>
<td style="text-align:left">......</td>
<td style="text-align:left">底端对齐</td>
</tr>
</tbody>
</table>
<p><strong>书写要点：</strong></p>
<ol>
<li>表格使用水平对齐符号<code>align</code>设置其在网页中居左、居中或居右显示。单元格内文本使用水平/垂直对齐<code>align/valign</code>设置其对齐方式；</li>
<li>在对齐符号的双引号内填写对齐方式，两种对齐符号之间添加一个空格；<br>
如：<code>align="center" valign="center"</code></li>
<li>对齐语句填写在要定义的开始符号（<code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;</code>）中
<ol>
<li>在<code>&lt;table&gt;</code>中添加定义，控制整个表格的对齐方式；</li>
<li>在<code>&lt;tr&gt;</code>中添加定义，控制一行的对齐方式；</li>
<li>在<code>&lt;tb&gt;</code>中添加定义，控制一个单元格的对齐方式；</li>
</ol>
</li>
</ol>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">valign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>Header1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>Header2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>Header3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">valign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row1, col1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row1, col2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row1, col3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">valign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>rowspan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row2, col2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>row2, col3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token attr-name">valign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>row3, col2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>效果：</p>
<table align="center">
    <tbody><tr align="center" valign="center">
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
    </tr>
    <tr align="center" valign="center">
        <td>row1, col1</td>
        <td>row1, col2</td>
        <td>row1, col3</td>
    </tr>
    <tr align="center" valign="center">
        <td rowspan="2">rowspan</td>
        <td>row2, col2</td>
        <td>row2, col3</td>
    </tr>
    <tr align="center" valign="center">
        <td colspan="2">row3, col2</td>
    </tr>
</tbody></table>
<h3 id="背景色">背景色 </h3>
<hr>
<blockquote>
<p>同样的，Markdown语法不支持修改文字背景色，但可以使用HTML来修改表格属性伪装成背景色。</p>
</blockquote>
<p><strong>该功能用到的HTML符号：</strong></p>
<table>
<thead>
<tr>
<th>符号</th>
<th>注释</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>bgcolor</td>
<td>background color</td>
<td>定义元素背景色</td>
</tr>
</tbody>
</table>
<p>书写：将单个单元格视为一行文字，在<code>&lt;td bgcolor=""&gt;</code>的双引号中添加背景色，背景色可以使用英文，也可以使用十六进制表示。</p>
<p>语法：<code>&lt;td bgcolor=""&gt;text here&lt;/td&gt;</code></p>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yellow<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>text here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>font</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#42b983<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>text here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>font</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>效果：</p>
<table><tbody><tr><td bgcolor="yellow">text here</td></tr></tbody></table>
<table><tbody><tr><td bgcolor="#42b983">text here</td></tr></tbody></table>
<h3 id="定义字体-字号和颜色">定义字体、字号和颜色 </h3>
<hr>
<blockquote>
<p>与合并单元格相同，Markdown本身不提供修改字体属性的语法，但支持HTML标记语言，所以我们可以通过HTML实现更改文字字体、字号和颜色的效果。</p>
</blockquote>
<p><strong>实现该功能用的HTML符号：</strong></p>
<table>
<thead>
<tr>
<th style="text-align:center">符号</th>
<th style="text-align:center">注释</th>
<th style="text-align:center">功能</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">font</td>
<td style="text-align:center">文字</td>
<td style="text-align:center">修改文字属性</td>
</tr>
<tr>
<td style="text-align:center">face</td>
<td style="text-align:center">字体</td>
<td style="text-align:center">定义文字字体</td>
</tr>
<tr>
<td style="text-align:center">size</td>
<td style="text-align:center">字号</td>
<td style="text-align:center">定义文字字号</td>
</tr>
<tr>
<td style="text-align:center">color</td>
<td style="text-align:center">颜色</td>
<td style="text-align:center">定义文字颜色</td>
</tr>
</tbody>
</table>
<p><strong>书写要点：</strong></p>
<ol>
<li>font是一对标签，要对文字属性进行修改，需要在起始标签<code>&lt;font&gt;</code>中添加语句；<br>
<code>&lt;font&gt;text here&lt;/font&gt;</code></li>
<li>修改字体，使用<code>face=""</code>，所用字体添加在双引号中；</li>
<li>修改字号，使用<code>size=""</code>，所用字体添加在双引号中；
<ul>
<li>size可能值为0~7，浏览器默认字号为3</li>
</ul>
</li>
<li>修改颜色，使用<code>color=""</code>，所用字体添加在双引号中；
<ul>
<li>颜色可以用英文、十六进制表示</li>
</ul>
</li>
</ol>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>font</span> <span class="token attr-name">face</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Adobe Garamond<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>text here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>font</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>font</span> <span class="token attr-name">face</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>黑体<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>text here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>font</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>font</span> <span class="token attr-name">face</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>黑体<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>text here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>font</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>font</span> <span class="token attr-name">face</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Adele<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#DCDCDC<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>text here<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>font</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>效果：<br>
<font face="Adobe Garamond">text here</font><br>
<font face="黑体" size="5">text here</font><br>
<font face="黑体" size="2" color="blue">text here</font><br>
<font face="Adele" size="7" color="#DCDCDC">text here</font></p>
<h3 id="修改图片大小和位置">修改图片大小和位置 </h3>
<hr>
<p><strong>实现该功能用的符号：</strong></p>
<table>
<thead>
<tr>
<th style="text-align:center">符号</th>
<th style="text-align:center">注释</th>
<th style="text-align:center">功能</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">width</td>
<td style="text-align:center">宽度</td>
<td style="text-align:center">定义图片宽度</td>
</tr>
<tr>
<td style="text-align:center">height</td>
<td style="text-align:center">高度</td>
<td style="text-align:center">定义图片高度</td>
</tr>
<tr>
<td style="text-align:center">align</td>
<td style="text-align:center">align：对齐</td>
<td style="text-align:center">定义元素对齐方式</td>
</tr>
<tr>
<td style="text-align:center">div</td>
<td style="text-align:center">division：划分</td>
<td style="text-align:center">修改划分元素（这里指图片）的属性</td>
</tr>
<tr>
<td style="text-align:center">img src=""</td>
<td style="text-align:center">image source</td>
<td style="text-align:center">设置图片地址</td>
</tr>
</tbody>
</table>
<p><strong>书写要点</strong>：</p>
<ol>
<li>图片插入语法使用<code>&lt;img src=""&gt;</code>，在双引号中添加图片链接；<br>
如：<code>&lt;img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg"&gt;</code></li>
<li>在图片链接后添加定义图片大小的语句，语句之间用空格连接；<br>
<code>&lt;img src="" width="" height=""&gt;</code></li>
<li>图片的宽度和高度可以用百分比或像素定义；<br>
<code>&lt;img src="" width="50%" height="50%"&gt;</code><br>
<code>&lt;img src="" width="250" height="250"&gt;</code></li>
<li>定义图片位置的语句写在父元素<code>&lt;div&gt;&lt;/div&gt;</code>的起始元素<code>&lt;div&gt;</code>中。<br>
<code>&lt;div align=""&gt;&lt;img src="" width="" height=""&gt;&lt;/div&gt;</code></li>
</ol>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30%<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30%<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>170<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>170<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>效果：</p>
<div align="center"><img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg" width="30%" height="30%"></div>
<div align="center"><img src="https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg" width="170" height="170"></div>
<h3 id="引用类型链接">引用类型链接 </h3>
<hr>
<blockquote>
<p>引用类型链接使URL在Markdown中更易于显示、阅读和管理。其相当于将行内链接拆分成两部分，并通过标签来连接。<br>
个人认为引用类型链接和<code>[text](URL)</code>的区别不大，但在有大量URL时，更好管理。</p>
</blockquote>
<p>引用类型链接分为两部分：</p>
<ul>
<li>与文本保持内联的部分</li>
<li>存储在文件中其他位置的部分（一般是末尾）</li>
</ul>
<p><strong>链接的第一部分格式<code>[显示文本][label]</code></strong><br>
书写：</p>
<ol>
<li>该部分使用两组方括号，方括号之间没有空格；</li>
<li>第一组方括号内放置链接显示文本；</li>
<li>第二组方括号内放置显示的标签，该标签是指向存储在文档其他位置的链接，可以包括数字、字母、空格或标点符号。</li>
</ol>
<p><strong>链接的第二部分格式<code>[label]: &lt;URL&gt; "tittle</code>"</strong><br>
书写：</p>
<ol>
<li>第一个方括号（用于链接的标签）后，紧跟一个冒号和至少一个空格，如：<code>[label]: </code>；</li>
<li>将链接的网址URL扩在尖括号中；</li>
<li>将连接的可选标题扩在双引号中，标题和URL之间以空格连接。</li>
</ol>
<p>注意：</p>
<ul>
<li>考虑到不同版本Markdown程序的兼容性，URL中间的空格使用<code>%20</code>代替。</li>
<li>可以将链接的第二部分放在文档中的任何位置，比如在文档末尾作为尾注或脚注</li>
</ul>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code>作家的命运是很奇特的。开头往往是[巴洛克式][1]，爱虚荣的巴洛克式，多年后，如果吉星高照，他有可能达到的不是简练（简练算不了什么），而是谦逊而隐蔽的复杂性。

[1]: &lt;https://zhuanlan.zhihu.com/p/63298524&gt; "巴洛克式是什么风格？"
</code></pre><p>效果：<br>
作家的命运是很奇特的。开头往往是<a href="https://zhuanlan.zhihu.com/p/63298524" title="巴洛克式是什么风格？">巴洛克式</a>，爱虚荣的巴洛克式，多年后，如果吉星高照，他有可能达到的不是简练（简练算不了什么），而是谦逊而隐蔽的复杂性。</p>
<h3 id="脚注">脚注 </h3>
<hr>
<blockquote>
<p>脚注使我们可以添加注释和参考，而不使正文混乱。<br>
与引用类链接相比，主要用于文档内部的跳转。读者可以单击脚注链接跳至页面底部的脚注，多用于添加注释内容。</p>
</blockquote>
<p>脚注分为两部分：</p>
<ul>
<li>文本内联部分</li>
<li>脚注部分</li>
</ul>
<p><strong>文本内联部分的书写方式：<code>[^label]</code></strong></p>
<ol>
<li>使用方括号和插入符号<code>[^]</code>创建脚注，在插入符号<code>^</code>后添加标识符；</li>
<li>标识符可以是数字或字母，但不能包含空格和制表符；</li>
<li>脚注要按顺序标号。</li>
</ol>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code>Here`s a simple footnote[^1], and here is the longer one.[^bignote]
</code></pre><p><strong>脚注部分的书写方式：<code>[^label]: text here</code></strong></p>
<ol>
<li>将上一部分带有标识符的脚注放至文档末尾（或任意位置）；</li>
<li>在脚注后紧跟冒号和空格，再添加注释文本。</li>
</ol>
<ul>
<li>脚注可以添加到文档任意位置，列表、块引用和表格等元素除外。</li>
</ul>
<p>示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>佩特说过，一切艺术都具有音乐的属性。
[^1]: Walter Horatio Pater(1839-1894)，英国评论家、散文家，倡导一种精美的散文题材，对唯美主义有较大影响。
[^2]: 出自[阿根廷]豪尔赫·路易斯·博尔赫斯《另一个、同一个》 
</code></pre><p>效果：<br>
佩特<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>说过，一切艺术都具有音乐的属性。<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p>
<h3 id="文档内跳转">文档内跳转 </h3>
<hr>
<p>跳转语法分为两部分：</p>
<ul>
<li>放置跳转链接的地方</li>
<li>要跳转到的位置</li>
</ul>
<p><strong>跳转链接的书写方式：<code>&lt;a href="#id"&gt;text here&lt;/a&gt;</code></strong><br>
<strong>要跳转到位置的书写方式：<code>&lt;div id="id"&gt;text here&lt;/div&gt;</code></strong></p>
<p>示例：</p>
<pre data-role="codeBlock" data-info="HTML" class="language-html HTML"><code># 第一个跳转
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>跳到一个地方去:sunglasses:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>你跳过来了<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

# 第二个跳转
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>跳转回去<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>又回来了<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>效果：<br>
<a href="#1">跳到一个地方去😎</a></p>
<div id="2">又回来了</div>
<h3 id="定义列表">定义列表 </h3>
<hr>
<p>一些Markdown处理器允许创建术语及其对应定义的定义列表。要创建定义列表，需在第一行上键入术语。在下一行，键入一个冒号，后跟一个空格和定义。</p>
<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term.</dd>
<dd>This is another definition of the second term.</dd>
</dl>
<h3 id="任务列表">任务列表 </h3>
<hr>
<p>创建带复选框的任务列表，需在任务列表前添加破折号<code>-</code>和方括号<code>[]</code>，并在两者之间和方括号内添加空格(<code> [ ]</code>)。若要选择复选框，需在方括号内添加x(<code>[x]</code>)。</p>
<p>示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>- [ ] 在地球上花费不多
- [ ] 梦境不收入场费
- [x] 幻想只有在破灭时才须代价 

</code></pre><p>效果：</p>
<ul>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> 在地球上花费不多</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> 梦境不收入场费</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked=""> 幻想只有在破灭时才须代价</li>
</ul>
<h3 id="使用emoji表情">使用emoji表情 </h3>
<hr>
<ol>
<li>将表情复制粘贴到Markdown格式的文本中
<ul>
<li><a href="https://cn.piliapp.com/emoji/cheat-sheet/">推荐网址: Emoji Cheat Sheet</a></li>
<li><a href="https://www.emojiall.com/zh-hans">推荐网址: EMOJIALL</a></li>
</ul>
</li>
<li>键入表情符号简码 emoji shortcode</li>
<li>推荐插件：Markdowntools</li>
</ol>
<p>示例：</p>
<pre data-role="codeBlock" data-info="dotnetcli" class="language-dotnetcli dotnetcli"><code>去露营了！:tent:
开心开心！:joy:
</code></pre><p>效果：<br>
去露营了！⛺<br>
开心开心！😂</p>
<div id="1">你跳过来了</div>
<a href="#2">跳转回去</a>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Walter Horatio Pater(1839-1894)，英国评论家、散文家，倡导一种精美的散文题材，对唯美主义有较大影响。 <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>出自[阿根廷]豪尔赫·路易斯·博尔赫斯《另一个、同一个》 <a href="#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
</div>
      </div>
      
      
    
    
    
    
    
    
  
    </body></html>